<template>
    <div class="mainBox">
        <ul class="list">
            <li>
                <p class="favoTime">收藏时间：
                    <span>{{detail.creatTime}}</span>
                </p>
                <p class="infoTitle">面对消费升级下的消费偏好转移，不再以价格导向求获得的接受度逐渐升高，我们原本过渡</p>
                <div class="imgBox">
                    <img src="../../../assets/image/pg1.png" alt="">
                    <img class="marginLeft30" src="../../../assets/image/pg2.png" alt="">
                    <img class="marginLeft30" src="../../../assets/image/pg3.png" alt="">
                    <img class="marginLeft30" src="../../../assets/image/pg4.png" alt="">
                </div>
                <div class="footInfo">
                    <span>{{detail.creatTime}}</span>
                    <span>&nbsp;&nbsp;&nbsp;职引官</span>
                    <span class="watch">
                        <i class="iconfont">&#xe640;</i>{{detail.comment}}</span>

                </div>
                <div class="line"></div>
            </li>
            <li>
                <p class="favoTime">收藏时间：
                    <span>{{detail.creatTime}}</span>
                </p>
                <p class="infoTitle">面对消费升级下的消费偏好转移，不再以价格导向求获得的接受度逐渐升高，我们原本过渡</p>
                <div class="content">
                    <img class="iconHead" src="../../../assets/image/pw2.png" alt="">
                    <span class="smile">微笑达人</span>
                    <div class="infoBox">
                        <p>这个过程有点类似竞品分析，寻找同行业产品，从中挑选设计质量较好的，把页面存成图片，把logo分类整理等。在这个过程中我们自己也会对网站进行一些分析。多设计师都有这样的烦恼，好辛辛苦苦做出来的设计稿，在领导眼中却是各种问题，除了视觉表现能力外，大部分情况是因为对产品</p>
                    </div>
                    <div class="footInfo">
                        <span>{{detail.creatTime}}</span>
                        <span class="watch">
                            <i class="iconfont">&#xe640;</i>{{detail.comment}}</span>
                        <span class="comment">
                            <i class="iconfont">&#xe63a;</i>{{detail.watch}}</span>
                        <span class="like">
                            <i class="iconfont">&#xe60c;</i>{{detail.like}}</span>
                    </div>
                </div>
                <div class="line"></div>
            </li>
            <li>
                <p class="favoTime">收藏时间：
                    <span>{{detail.creatTime}}</span>
                </p>
                <p class="infoTitle">面对消费升级下的消费偏好转移，不再以价格导向求获得的接受度逐渐升高，我们原本过渡</p>
                <div class="content">
                    <img class="iconHead" src="../../../assets/image/pw2.png" alt="">
                    <span class="smile">微笑达人</span>
                    <div class="infoContent">
                        <p>这个过程有点类似竞品分析，寻找同行业产品，从中挑选设计质量较好的，把页面存成图片，把logo分类整理等。在这个过程中我们自己也会对网站进行一些分析。多设计师都有这样的烦恼，辛辛苦苦做出来的设计稿，在领导眼中却是各种问题，除了视觉表现能力外，大部分情况是因为对产品</p>
                    </div>
                    <div class="imgContent">
                        <img src="../../../assets/image/pg1.png" alt="">
                        <img class="marginLeft30" src="../../../assets/image/pg2.png" alt="">
                        <img class="marginLeft30" src="../../../assets/image/pg3.png" alt="">
                        <img class="marginLeft30" src="../../../assets/image/pg4.png" alt="">
                    </div>
                </div>
                <div class="line"></div>

            </li>
            <li>
                <p class="favoTime">收藏时间：
                    <span>{{detail.creatTime}}</span>
                </p>
                <div class="content">
                    <img class="iconHead" src="../../../assets/image/pw4.png" alt="">
                    <span class="smile">首席财务官CFO</span>
                    <div class="infoContentainer">
                        <div class="salaryBox">
                            <p class="yellowTitle">50k元/月</p>
                            <p class="mainTitle">三年工作平均薪资</p>
                            <p class="lastTitle">一线10000
                                <span class="vs">VS&nbsp;</span>本地10000 </p>
                        </div>
                        <div class="numberBox">
                            <p class="yellowTitle">200000</p>
                            <p class="mainTitle">需求量(人)</p>
                            <p class="lastTitle">一线10000
                                <span class="vs">VS&nbsp;</span>本地10000 </p>
                        </div>
                    </div>
                </div>
                <div class="line"></div>

            </li>
        </ul>
    </div>

</template>
<script>
import Services from '@/service/service'
export default {
  data() {
    return {
      detail:{
          creatTime:'',
          comment:'',
          like:''
      }
    };
  },
  created(){
      let data={
          param:{
              detail:{
                  creatTime:this.detail.creatTime,
                  comment:this.detail.comment,
                  like:this.detail.like
              }
          }
      };
      Services.myAjax({
          data:data,
          methods:'post',
         url: Services.baseUrl + "/favourite",
      })
  }
};
</script>
<style  lang="stylus" scoped>
.mainBox {
    .list {
        padding-top: 30px;
        li {
            margin-bottom: 30px;
            .line{
                width:1200px;
                border-bottom: 1px solid #DEDEDE;
            }

            .favoTime {
                font-size: 14px;
                color: #555555;
            }
            .iconHead {
                    width: 50px;
                    height: 50px;
                    border-radius: 25px;
                    margin-right: 15px;
                }

            .infoTitle {
                font-size: 18px;
                font-weight: bold;
                margin-top: 20px;
            }

            .imgBox {
                width: 1270px;
                height: 180px;
                margin-top: 25px;

                img {
                    width: 287px;
                    height: 160px;
                }

                .marginLeft30 {
                    margin-left: 15px;
                }
            }

            .footInfo {
                width: 1150px;
                font-size: 16px;
                color: #555555;
                padding-bottom: 20px;


                .watch {
                    float: right;
                }
            }

            .content {
                margin-top: 25px;
                padding-left:1px;

                .smile {
                    font-size: 16px;
                    color: #555555;
                }               

                .infoBox {
                    width: 1202px;
                    background: #F2F2F2;
                    margin-top: 20px;
                    padding: 15px;

                    p {
                        font-size: 14px;
                        color: #555555;
                        line-height: 20px;
                    }
                }

                .footInfo {
                    width: 1232px;
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;
                }
            }

            .infoContent {
                width: 1200px;
                margin-top: 20px;
                padding: 15px;

                p {
                    font-size: 14px;
                    color: #555555;
                    line-height: 20px;
                }
            }

            .imgContent {
                width: 1270px;
                padding-bottom: 30px;
                img {
                    width: 276px;
                    height: 160px;
                }

                .marginLeft30 {
                    margin-left: 15px;
                }
            }
            .infoContentainer{
                display:flex;
                margin-bottom :30px;
                .salaryBox,.numberBox{
                    text-align :center;
                    margin-left :30px;
                }
               .yellowTitle{
                   color:#fed226;
                   font-size 16px;
                   font-weight:bold;

               }
               .mainTitle{
                   font-size:18px;
                   color :#333333;
                   margin-top :10px;
               }
               .lastTitle{
                   font-size:14px;
                   color :#555555;
                   margin-top :10px;

               }
               .vs{
                   font-size :18px;
                   color :#417CF2;

               }

            }
        }
    }
}
</style>


